<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<div th:replace="common/commoncss :: commoncss"></div>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
<style type="text/css">
.imgs {
	display: block;
	width: 100px;
	height: 100px;
}

.list-group li {
	margin-bottom: 10px;
	list-style-type: none;
}

a {
	text-decoration: none !important;
	color:black;
}
a:focus {
    outline:0px auto -webkit-focus-ring-color; 
    color:black;
    
}


.pa {
	margin-top: 12px;
	margin-bottom: 10px;
}

.nav-tabs-custom {
	background-color: #fff;
}

h1, h3 {
	font-family: 'Source Sans Pro', sans-serif;
}

.bo {
	margin-bottom: 12px;
}

.nav-tabs-custom>.nav-tabs>li:first-of-type {
	margin-left: 0;
}

.nav-tabs-custom>.nav-tabs>li.active {
	border-top-color: #3c8dbc;
}

.nav-tabs-custom>.nav-tabs>li {
	border-top: 3px solid transparent;
	margin-bottom: -2px;
	margin-right: 5px;
}

.nav-tabs-custom>.nav-tabs>li:first-of-type.active>a {
	border-left-color: transparent;
}

.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li>a:hover {
	background: transparent;
	margin: 0;
}

.nav-tabs-custom>.nav-tabs>li>a:hover {
	color: #999;
}

.nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a
	{
	background-color: #fff;
	color: #444;
}

.nav-tabs-custom>.nav-tabs>li>a {
	color: #444;
	border-radius: 0;
}

.nav-tabs>li>a {
	margin-right: 2px;
	line-height: 1.42857143;
	border: 0px;
	border-radius: 4px 4px 0 0;
}
.list-inline li{
	display:block;
}
.me{
    margin-right: 5px;
}
</style>

<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">我的信息</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
			disabled="disabled">我的信息</a>
	</div>
</div>
<div class="row" style="padding-top: 10px;">
	<div class="col-md-3">

		<div class="bgc-w box box-solid " style="border-top: 3px solid blue;">
			<div class="box-header ">
				<span class="imgs center-block">
					<img style="width: 110px;height: 90px;" class="profile-user-img img-responsive img-circle" th:src="@{'/public/user/' + ${aoaUser.imgPath}}" />
				</span>
				<h3 class="profile-username text-center">
					<span id="ctl00_cphMain_lblFullName" th:text="${aoaUser.userName}"></span>
				</h3>
				<p class="text-muted text-center">
					<span id="ctl00_cphMain_lblPosition" th:text="${aoaUser.position.name}"></span>
					（<span id="ctl00_cphMain_lblDepartment" th:text="${aoaUser.aoaDept.deptName}"></span>）
				</p>
				<hr class="pa" />

				<ul class="list-group ">
					<li class=""><b>我的消息</b> <a th:href="@{/notice/list}" class="pull-right me" ><span
							id="ctl00_cphMain_lblMsgCount" th:text="${noticeCount}"></span></a></li>
					<hr class="pa" />
				</ul>
			</div>

		</div>

		<div class="bgc-w box box-solid" style="border-top: 3px solid blue;">
			<div class="box-header">
				<h3 class="box-title">基本资料</h3>
			</div>
			<div class="box-body">
				<strong><i class="glyphicon glyphicon-book"></i> 学历</strong>
				<p class="text-muted">
					<span id="ctl00_cphMain_lblEducation" th:text="${aoaUser.userSchool + ' ' + aoaUser.userEdu}">&nbsp;&nbsp;</span>
				</p>

				<hr />

				<strong><i class="glyphicon glyphicon-earphone"></i> 手机</strong>
				<p class="text-muted">
					<span id="ctl00_cphMain_lblPhone" th:text="${aoaUser.userTel}"></span>
				</p>

				<hr />

				<strong><i class="glyphicon glyphicon-map-marker"></i> 地址</strong>
				<p class="text-muted">
					<span id="ctl00_cphMain_lblAddress" th:text="${aoaUser.address}"></span>
				</p>

				<hr />

<!--				<strong><i class="glyphicon glyphicon-pencil"></i> 签名</strong>-->
<!--				<p class="text-muted">-->
<!--					<span id="ctl00_cphMain_lblNote">${(user.userSign)!''}</span>-->
<!--				</p>-->
			</div>
		</div>
	</div>
	<div class="col-md-9" style="margin-bottom: 60px;">


		<div class=" nav-tabs-custom">
			<ul class="nav nav-tabs">
				<li class="personset"><a href="" data-toggle="tab" >个人设置</a></li>
			</ul>

			<form th:action="@{/a/user/saveUser}" method="post" enctype="multipart/form-data" >
			<div class="tab-content">
					<div class="box-body">
						<div class="row">
							<div class="col-md-6 form-group">
								<input type="hidden" name="userId" th:value="${aoaUser.userId}">
								<input type="hidden" name="imgPath" id="filmpic"  th:value="${aoaUser.imgPath}">
								<label class="control-label">
									<span id="ctl00_cphMain_Label1">用户名</span>
								</label>
								<input name="userName" type="text" th:value="${aoaUser.userName}" readonly="readonly"
									   id="ctl00_cphMain_txtName" class="form-control" style="background-color:#fff;" onfocus="this.blur()" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label2">电话</span>
								</label>
								<input name="userTel" type="text" th:value="${aoaUser.userTel}" id="ctl00_cphMain_txtPhone1" class="form-control" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label3">真实姓名</span>
								</label>
								<input name="realName" type="text" th:value="${aoaUser.realName}"
									id="ctl00_cphMain_txtFullName" class="form-control" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label4">Email</span>
								</label>
								<input name="email" type="text" th:value="${aoaUser.email}" id="ctl00_cphMain_txtEmail1" class="form-control" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label15">地址</span>
								</label>
								<input name="address" type="text" th:value="${aoaUser.address}" id="ctl00_cphMain_txtAddress1" class="form-control" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label6">学历</span>
								</label>
								<input name="userEdu" type="text" th:value="${aoaUser.userEdu}" id="ctl00_cphMain_txtEducation" class="form-control" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label7">毕业院校</span>
								</label>
								<input name="userSchool" type="text" th:value="${aoaUser.userSchool}" id="ctl00_cphMain_txtSchool" class="form-control" />
							</div>

							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label18">性别</span>
								</label>
								<select name="sex" id="ctl00_cphMain_ddlSex" class="form-control select2">
<!--									<option th:value="${aoaUser.sex}"></option>-->
									<option th:selected="${aoaUser.sex == '女'}" value="女">女</option>
									<option th:selected="${aoaUser.sex == '男'}" value="男">男</option>
								</select>
							</div>


							<div class="col-md-6 form-group">
								<label class="control-label">
									<span id="ctl00_cphMain_Label19">生日</span>
								</label>
								<input name="birth" type="text" th:value="${#dates.format(aoaUser.birth,'yyyy-MM-dd')}" class="form-control" readonly="readonly" style="background-color:#fff;"/>
							</div>

						</div>

						<div class="row">
							<hr />
							<div class="layui-form-item">
								<label class="layui-form-label">头像</label>
								<div class="layui-input-block">
									<div id="queue">
										<img alt="头像"  th:style="${(aoaUser.imgPath != null and aoaUser.imgPath != '') ? '' : 'display:none'}" width="200px" id="queue_img" height="200px" th:src="@{'/public/user/' + ${aoaUser.imgPath}}" >
									</div><br>
									<button type="button" class="layui-btn" id="film-pic">
										<i class="layui-icon">&#xe67c;</i>上传图片
									</button>
								</div>
							</div>

						</div>

					</div>

					<div class="box-footer" style="position: relative; overflow: hidden;">
						<input type="submit" name="ctl00$cphMain$btnSave" value="保存"
							id="ctl00_cphMain_btnSave" class="btn btn-primary" />
					</div>
			</div>
		</form>
		</div>
	</div>
</div>
<script th:src="@{/assets/layui.all.js}"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
	/*]]>*/
</script>
<script>
	var form = layui.form
			,layer = layui.layer;
</script>
<!--wangEditor 富文本编辑器-->
<script type="text/javascript">
	var E = window.wangEditor
	var editor = new E('#remark')
	var text_summary = $('#summary')
	editor.customConfig.onchange = function (html) {
		// 监控变化，同步更新到 textarea
		text_summary.val(html)
	}
	// 配置服务器端地址
	editor.customConfig.uploadImgServer = contextPath + '/a/upload/file'
	//配置指定文件名
	editor.customConfig.uploadFileName = 'file'
	editor.customConfig.uploadImgHooks = {
		customInsert: function (insertImg, result, editor) {
			// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
			// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
			var url =result.data[0];
			insertImg(url);
		}
	}
	/*加载插件*/
	editor.create()
</script>
<!--图片上传-->
<script type="text/javascript">
	layui.use('upload', function(){
		var upload = layui.upload;

		//执行实例
		var uploadInst = upload.render({
			elem: '#film-pic' //绑定元素
			,url: contextPath + '/a/upload/file' //上传接口
			,done: function(res){
				//上传完毕回调
				//将图片路径放到film实体的图片路径属性中
				console.log(res.data);
				$("#filmpic").val(res.data[1]);
				//将图片路径放到img标签中
				$("#queue_img").css("display","block");
				$("#queue_img").attr("src", contextPath + "/public/user/" + res.data[1]);
			}
			,error: function(res){
				//请求异常回调
				layer.msg(res.data);
			}
		});
	});

</script>

	<script type="text/javascript">
		$('.mynote').removeClass("active");
		$("#memo").removeClass("active");
		$('.personset').addClass("active");
		$("#settings").addClass("active");
		$('.error-emp').text('${errormess}');
		
	</script>
<script>
	$(function(){
		getBirth();
		$(".edit").click(function(){
			
			var $content=$(this).siblings(".concent").children(".papercontent").text();
			var $papertitle=$(this).siblings(".title").children(".papertitle").text();
			var $paperid=$(this).siblings(".pk").children(".paperid").text();
			$(".noteid").val($paperid);
			$(".patitle").val($papertitle);
			$(".pacontent").val($content);
			
		});
		$(".wri").click(function(){
			$(".noteid").val("");
			$(".patitle").val("");
			$(".pacontent").val("");
			
		});
		$('.modalclose').on('click',function(){
			$('.control').each(function(){
				$(this).parent().removeClass("has-error has-feedback");
			});	
			$('.alert-danger').css("display","none");
			
		});
		
		/* 从身份证号当中截取出生年月 */
		function getBirth(){
			 if($.trim($("#ic").val()) != "") {
	             var date = "";
	             if($("#ic").val().length == 15) {
	                  date =  '19'+$("#ic").val().substr(6,2)+'-'+$("#ic").val().substr(8,2)+'-'+$("#ic").val().substr(10,2);
	            } else if ($("#ic").val().length == 18) {
	                date =  $("#ic").val().substr(6,4)+'-'+$("#ic").val().substr(10,2)+'-'+$("#ic").val().substr(12,2);
	            }
	           $("#Birthday").val(date);
	       }   
		}
		
		$('.thisclose').on('click', function() {
			$(this).parent().css('display', 'none');
		});
		// 错误信息输入框获取到焦点事件时，讲红色错误信息提醒取消
		$('.form-control').on("focus", function() {
			$(this).parent().removeClass("has-error has-feedback");
		});
		
		$("#ic").blur(function(){getBirth();});
		
	}); 
	
		
//表单提交前执行的onsubmit()方法；返回false时，执行相应的提示信息；返回true就提交表单到后台校验与执行
function check() {
	console.log("开始进入了");
	//提示框可能在提交之前是block状态，所以在这之前要设置成none
	$('.alert-danger').css('display', 'none');
	var isRight = 1;
	$('.control').each(function(index) {
		// 如果在这些input框中，判断是否能够为空
		if ($(this).val() == "") {
			// 获取到input框的兄弟的文本信息，并对应提醒；
			  var brother = $(this).siblings('.control-label').text();
			var errorMess = "[" + brother + "不能为空]";
			// 对齐设置错误信息提醒；红色边框
			$(this).parent().addClass("has-error has-feedback");
			$('.alert-danger').css('display', 'block');
			// 提示框的错误信息显示
			$('.error-mess').text(errorMess);
			
			isRight = 0;
			return false;
		} else {
			// 在这个里面进行其他的判断；不为空的错误信息提醒
			return true;
		}
	});
	
	if (isRight == 0) {
		//modalShow(0);
		 return false;
	} else if (isRight == 1) {
		//modalShow(1);
		 return true;
	}
//	return false;
}

//验证中文名称
function isChinaName(name) {
 var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
 return pattern.test(name);
}
 
// 验证手机号
function isPhoneNo(phone) { 
 var pattern = /^1[34578]\d{9}$/; 
 return pattern.test(phone); 
}
 
// 验证身份证 
function isCardNo(card) { 
 var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
 return pattern.test(card); 
} 
//验证邮箱
function isMailNo(mail){
	var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
	return pattern.test(mail);
}
//验证卡号
function CheckBankNo(bankn) {
	var flag=true;
	 if(isNaN(bankn)) {
		 alertCheck("银行卡号必须全为数字!");
	     flag=false;
	   }
	
	var bankno = $.trim(bankn);
  　　if(bankno.length < 16 || bankno.length > 19) {
	 alertCheck("银行卡号长度必须在16到19之间!");
     flag=false;
   }
  
   //开头6位
   var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
   if(strBin.indexOf(bankno.substring(0, 2)) == -1) {
	 alertCheck("银行卡号开头6位不符合规范!");
	 flag=false;
   }
   
   return flag;
}
//验证密码
function isPasswordNo(password){
	var flag=true;
	var bankno = $.trim(password);
  　　if(bankno.length < 6 || bankno.length > 19) {
	 alertCheck("密码长度必须在6到19之间!");
     flag=false;
   }
	 if(!isNaN(bankno)) {
		 alertCheck("密码不能全为数字!");
	     flag=false;
	   }
	 return flag;
}

/**
 * 用户表单校验
 */
 
//表单提交前执行的onsubmit()方法；返回false时，执行相应的提示信息；返回true就提交表单到后台校验与执行
function alertCheck(errorMess){
		
		$('.alert-danger').css('display', 'block');
		// 提示框的错误信息显示
		$('.error-emp').text(errorMess);
		
}

 function empcheck() {
 	console.log("开始进入了");
 	//提示框可能在提交之前是block状态，所以在这之前要设置成none
 	$('.alert-danger').css('display', 'none');
 	var isRight = 1;
 	$('#settings .form-control').each(function(index) {
 		// 如果在这些input框中，判断是否能够为空
 		if ($(this).val() == "") {
 			// 排除哪些字段是可以为空的，在这里排除
 			if (index == 13 ||index == 14) {
 				return true;
 			}
 			
 			// 获取到input框的兄弟的文本信息，并对应提醒；
 			var brother = $(this).siblings('.control-label').text();
 			var errorMess = "[" + brother + "不能为空]";
 			// 对齐设置错误信息提醒；红色边框
 			$(this).parent().addClass("has-error has-feedback");
 			$('.alert-danger').css('display', 'block');
 			// 提示框的错误信息显示
 			$('.error-emp').text(errorMess);
 			isRight = 0;
 			
 			return false;
 		} else {
 			if (index == 1) {
 				var $phone=$(this).val();
 				
 				
 				if(isPhoneNo($phone) == false){
 					$(this).parent().addClass("has-error has-feedback");
 					alertCheck("请输入正确的电话号码!");
 					isRight = 0;
 		 			return false;
 				}
 				
 			}else if(index == 3){
 				var $mail=$(this).val();
 				if(isMailNo($mail) == false){
 					$(this).parent().addClass("has-error has-feedback");
 					alertCheck("请输入正确的邮箱!");
 					isRight = 0;
 		 			return false;
 				}
 				
 			}else if(index == 7){
 				var $card=$(this).val();
 				if(isCardNo($card) == false){
 					$(this).parent().addClass("has-error has-feedback");
 					alertCheck("请输入正确的身份证号!");
 					isRight = 0;
 		 			return false;
 				}
 				
 			}else if(index == 8){
 				var $bank=$(this).val();
 				if(CheckBankNo($bank) == false){
 					$(this).parent().addClass("has-error has-feedback");
 					isRight = 0;
 		 			return false;
 				}
 				
 			}else if(index == 13){
 				var flag=true;
 				var $savepassword=$("#Password2").val();
 				var $newpassword=$(this).val();
 				if(isPasswordNo($newpassword) == false){
 					$(this).parent().addClass("has-error has-feedback");
 					isRight = 0;
 					flag=false;
 				}else if($savepassword == ""){
 					$(this).parent().addClass("has-error has-feedback");
 					alertCheck("确认密码不能为空!");
 					isRight = 0;
 					flag=false;
 				}
 				
 				return flag;
 				
 			}else if(index == 14){
 				var $savepassword=$(this).val();
 				var $newpassword=$("#Password1").val();
 				if($savepassword != $newpassword){
 					$(this).parent().addClass("has-error has-feedback");
 					alertCheck("请输入一致的密码!");
 					isRight = 0;
 		 			return false;
 				}
 				
 			}
 			
 			// 在这个里面进行其他的判断；不为空的错误信息提醒
 			return true;
 		}
 	});
 	
 	if (isRight == 0) {
 		//modalShow(0);
 		 return false;
 	} else if (isRight == 1) {
 		//modalShow(1);
 		 return true;
 	}
// 	return false;
 }
</script>
</html>
